/**
 * webpack config文件
 *
 * @file webpack.config.js
 * @author labs
 */

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const tsImportPluginFactory = require('ts-import-plugin');
const path = require('path');

module.exports = {
    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
    entry: './src/index.tsx',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer: {
        hot: true,
        contentBase: path.join(__dirname, 'dist'),
        historyApiFallback: {
            index: 'index.html'
        }
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
            '~': path.resolve(__dirname, 'node_modules')
        },
        extensions: ['.ts', '.tsx', '.js', '.json']
    },
    module: {
        rules: [
            {
                test: /\.(j|t)sx?$/,
                loader: 'ts-loader',
                options: {
                    transpileOnly: true,
                    getCustomTransformers: () => ({
                        // ts-import-plugin 按需引入antd
                        before: [
                            tsImportPluginFactory({
                                libraryName: 'antd',
                                libraryDirectory: 'es',
                                style: 'css'
                            })
                        ]
                    }),
                    compilerOptions: {
                        // 模块规范是2015
                        module: 'es2015'
                    }
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', {
                    // style-loader是把css当作一个标签插入到html中
                    loader: 'css-loader',
                    options: {
                        importLoaders: 0
                    }
                }, {
                    // 是用来根据caniuse中的数据添加厂商前缀的
                    loader: 'postcss-loader',
                    options: {
                        plugins: require('autoprefixer')
                    }
                }, {
                    loader: 'px2rem-loader',
                    options: {
                        // 一个rem代表75px
                        remUnit: 75,
                        // 计算精度保留8位小数
                        remPrecssion: 8

                    }
                }]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 0
                        }
                    },
                    {
                        // 是用来根据caniuse中的数据添加厂商前缀的
                        loader: 'postcss-loader',
                        options: {
                            plugins: require('autoprefixer')
                        }
                    }, {
                        loader: 'px2rem-loader',
                        options: {
                            // 一个rem代表75px
                            remUnit: 75,
                            // 计算精度保留8位小数
                            remPrecssion: 8
                        }
                    }
                ]
            },
            {
                test: /\.(jpg|jpeg|png|gif|svg)$/,
                // 处理图片 把图片打包输出到目录中
                use: ['url-loader']
            }

        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            // 以此文件为模版 拼入打包后的文件，并输出到目标目录
            template: './src/index.html'
        }),
        // 热更新插件
        new webpack.HotModuleReplacementPlugin()
    ]
};


